<template>
  <j-modal
    :fullscreen="true"
    :switch-fullscreen="false"
    :closable="false"
    :footer="null"
    :visible="visible"
  >
    <div class="mobile addAdress-mobile">
      <div class="mobileHeight"  ref="mapBox">
        <div class="addAdress-btn">
          <a-button class="sure" type="primary" @click="handleOk">确定</a-button>
          <a-button class="cancel" type="primary" @click="handleCancel">取消</a-button>
        </div>
        <baidu-map class="map-box":ak="ak" :center="center" :zoom="15" :map-click="false">
          <my-local-search
            :keyword="keyword"
            @searchComplete="searchComplete"
          >
          </my-local-search>
          <bm-marker
            :position="center"
            :dragging="false"
            :title="addressTitle"
            :z-index="99999999"
            @click="infoWindowOpen">
            <bm-info-window
              :show="showInfo"
              @close="infoWindowClose"
              @open="infoWindowOpen">
              <div>{{ addressTitle }}</div>
              <span>地址：{{addressLoc}}</span>
            </bm-info-window>
          </bm-marker>
        </baidu-map>
        <div class="addAdress-key">
          <a-input placeholder="请输入地址" allow-clear v-model="keyword">
            <a-icon slot="prefix" type="search" />
          </a-input>
          <div class="addAdress-list">
            <a-list item-layout="horizontal" v-if="addressArr.length > 0" :data-source="addressArr">
              <a-list-item slot="renderItem" slot-scope="item, index" @click="selectAddress(item)">
                <a-list-item-meta :description= item.address>
                  <a slot="title">{{ item.title }}</a>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </div>

        </div>
      </div>
      <div class="weui-tabbar" v-show="isOriginHei">
        <a href="javascript:void(0);" class="weui-tabbar__item" @click="firstPage()">
          <span><i class="iconfont iconzhuye2"></i></span>
          <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:void(0);" class="weui-tabbar__item" @click="hrhsPage()">
          <span><i class="iconfont icondianzan1"></i></span>
          <p class="weui-tabbar__label">好人好事</p>
        </a>
        <a href="javascript:void(0);" class="weui-tabbar__item" @click="myPage()">
          <span><i class="iconfont iconwode-copy"></i></span>
          <p class="weui-tabbar__label">我的</p>
        </a>
      </div>
    </div>

  </j-modal>
</template>
<script>

import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker"; //点标注
import BmLocalSearch from 'vue-baidu-map/components/search/LocalSearch'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import MyLocalSearch from "@views/mobile/MyLocalSearch";
import JModal from '@/components/ksource/JModal'

export default {
  name: 'MinorsProtecteAdress',
  inject:['reload'],
  components: {
    BaiduMap,
    BmMarker,
    BmLocalSearch,
    BmInfoWindow,
    MyLocalSearch,
    JModal,
  },
  data() {
    return {
      ak: 'gIQitMgqO4MQh8CwP5gz7VV07ptPH72R',
      disabled: true,
      keyword: '唐山市',
      center: {
        lng: '118.18645947203979',
        lat: '39.63658372414733'
      },
      addressArr: [],
      addressTitle: '',
      showInfo: false,
      addressLoc: '',
      visible: false,
      isOriginHei: true,
      screenHeight: window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      originHeight: window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight
    };
  },
  created() {

  },
  mounted() {
    let self = this;
    window.onresize = function() {
      return (function() {
        self.screenHeight =
          window.innnerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      })();
    };
  },
  methods: {
    handleOk() {
      let param = {};
      let that = this;
      param = Object.assign({}, that.center);
      param.address = that.addressLoc;
      this.$emit('ok', param);
      that.visible = false;

    },
    handleCancel() {
      this.visible = false;
    },
    infoWindowOpen() {
      if (this.showInfo) this.showInfo = false;
      this.showInfo = true;
    },
    infoWindowClose() {
      this.showInfo = false;
    },
    searchComplete(arr) {
      let that = this;
      that.addressArr = arr;
    },
    selectAddress(item) {
      let that = this;
      that.showInfo = false;
      that.center = item.point;
      that.addressTitle = item.title;
      that.addressLoc = item.address;
      that.showInfo = true;

    },
    show(record) {
      let that = this;
      that.center.lat = record.center.lat;
      that.center.lng = record.center.lng;
      that.keyword = record.keyword;
      that.addressLoc = record.keyword;
      that.visible = true;
    },
    firstPage(){
      this.$router.push('/MinorsProtecteGuide');
    },
    hrhsPage(){
      this.$router.push('/GoodThingsList');
    },
    myPage(){
      this.$router.push('/PersonalMsg');
    }
  },
  watch: {
    screenHeight(val) {
      if (this.originHeight != val) {
        this.isOriginHei = false;
        this.$refs.mapBox.height = this.screenHeight +'px'
      } else {
        this.isOriginHei = true;
        this.$refs.mapBox.height = this.screenHeight - 64 +'px'
      }
    }
  },

};
</script>
